<template>
  <div :class="$style.modal3">
    <lay-form ref="formRef" :model="formData" :rules="formRules">
      <lay-form-item label="昵称" label-position="top" prop="nickName" required>
        <lay-input v-model="formData.nickName" placeholder="昵称" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item label="上传头像" label-position="top" prop="avatar" required>
        <div :class="$style.uploadInner">
          <lay-upload url="" accept-mime="image" @on-change="chooseImg">
            <img :class="$style.img" src="/touxiangshangchuan.png" alt="" v-if="!formData.avatar" />
            <img :class="$style.img" :src="formData.avatar" alt="" v-if="formData.avatar" />
          </lay-upload>
          <div :class="$style.uploadTip">
            上传图片大小不能超过500KB
          </div>
        </div>
      </lay-form-item>
      <lay-form-item>
        <lay-button type="primary" @click="submitForm">保存</lay-button>
      </lay-form-item>
    </lay-form>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Modal3",
  data() {
    return {
      formData: {
        nickName: '',
        avatar: '',
        // avatar: 'https://img0.baidu.com/it/u=100080021,1406455647&fm=253&fmt=auto&app=120&f=JPEG?w=756&h=500',
      },
      formRules: {
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        avatar: [
          { required: true, message: '请上传头像', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      let that = this;
      that.$refs.formRef.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData.nickName,
          //   avatar: that.formData.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('保存失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
    chooseImg(files) {
      let that = this;
      let typeList = ['image/jpeg', 'image/jpeg', 'image/png'];
      if (typeList.indexOf(files[0].type) == -1) {
        that.$layer.msg('请选择jpg、jpeg、png格式的图片', { time: 1000 });
        return;
      }
      if (files[0].size > 1024 * 500) {
        that.$layer.msg('请选择小于500KB的图片', { time: 1000 });
        return
      }
      // const formData = new FormData();
      // formData.append('image', files[0]);
      // let loadIndex = that.$layer.load();
      // that.$axios.post('', formData, {
      //   headers: {
      //     'Content-Type': 'multipart/form-data'
      //   },
      // }).then((res) => {
      //   console.log(res)
      // }).catch((err) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg('上传失败,请重试', { time: 1000 });
      // });
    },
  },
});
</script>
<style module>
.modal3 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
}

.uploadInner {
  display: flex;
  align-items: flex-end;
}

.img {
  width: 148px;
  height: 148px;
  cursor: pointer;
}

.uploadTip {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #606266;
  margin-left: 14px;
}
</style>
<style scoped>
:deep(.layui-upload-list) {
  margin: 0;
}

.layui-btn {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>